<template>
    <div>
        <van-nav-bar title="取号详情" left-text="" left-arrow @click-left="onClickLeft" />
        <div style="
        padding: 0px 16px;
        height:620px;
        background-color: #f5f5f5;
        overflow-y: auto;
        ">




            <div>
                <div style="
                          width:88%;
                          background-color: white;
                          margin-top: 15px;
                          border-radius: 7px;
                          line-height: 50px;
                          display: flex;
                          padding: 20px;
                          ">
                    <div>
                        <div style="
                             display: flex;
                             ">
                            <div>
                                <img style="
                                                width:45px;
                                                height: 45px;
                                                "
                                    src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png"
                                    alt="">
                            </div>
                            <div style="
                                        margin-top: -10px;
                                        margin-left: 18px;
                                        ">
                                <p style="
                                             font-weight: 700;
                                             font-size: 18px;
                                             color:#000000;
                                             font-style: normal;
                                             ">刘医生<span style="
                                             font-weight: 400;
                                             font-size: 13px;
                                             color:#1F1F1F;
                                             margin-left: 10px;
                                             ">主任医师</span></p>
                                <p style="
                                              font-weight: 400;
                                             font-size: 14px;
                                             color:#1F1F1F;
                                             margin-top: -27px;
                                             ">门诊外一科 <span style="margin-left: 10px;">四川省保健院南苑</span></p>
                            </div>
                        </div>
                        <div style="
                                        display: flex;
                                        width: 130px;
                                        justify-content: space-between;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">就诊人</p>
                            <p style="font-size:14px;">王小柯</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 175px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">预约号</p>
                            <p style="font-size:14px;">20200101020</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 295px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">预约时间</p>
                            <p style="font-size:14px;">2020-01-27 08:30-12:00（上午）</p>

                        </div>
                        <div style="
                                        display: flex;
                                        width: 250px;
                                        justify-content: space-between;
                                        margin-top: -20px;
                                        ">
                            <p style="color:#AAAAAA;font-size:14px;">就诊地点</p>
                            <p style="font-size:14px;">南苑门诊大楼二楼520诊室</p>

                        </div>

                    </div>

                </div>
            </div>

            <button style="
                width: 100px;
                height: 100px;
                color:#FFFFFF;
                background-color: #1677ff;
                border-radius: 50%;
                font-size: 14px;
                font-weight: 400;
                margin-top: 100px;
                text-align: center;
                line-height: 100px;
                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
                border:0;
                margin-left: 120px;
                " @click="quhao">
                取号
            </button>
            <p style="
                font-weight: 400;
                font-size: 14px;
                color: #13C2C2;
                text-align: center;
                margin-top: 20px;
                overflow: hidden;
                ">
                当前范围可取号
            </p>
            <p style="
                font-weight: 400;
                font-size: 14px;
                color: #AAAAAA;
                text-align: center;
                margin-top: 10px;
                overflow: hidden;
                ">
                <img style="
                width: 18px;
                height: 18px;
                margin-top: 3px;
                " src="https://cdn7.axureshop.com/demo/2208121/images/%E5%8F%96%E5%8F%B7%E8%AF%A6%E6%83%85/u3628.svg"
                    alt="">
                四川省成都市锦江区画溪路666号
            </p>


        </div>
    </div>


</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'


const router = useRouter()

const onClickLeft = () => {
    router.push('/ZiDongQuHao')
}

const quhao = () => {
    setTimeout(() => {
        ElNotification({
            dangerouslyUseHTMLString: true,
            message: '<strong>验证中...</strong>',
        })
    }, 2000)
  
     setTimeout(() => {
        ElNotification({
            dangerouslyUseHTMLString: true,
            message: '<strong>取号中...</strong>',
        })
    }, 4000)

    setTimeout(() => {
        ElNotification({
            dangerouslyUseHTMLString: true,
            message: '<strong>取号成功</strong>',
        })
    }, 6000)


    setTimeout(() => {
        router.push('/ZiDongQuHao')
    }, 7000)


}








</script>

<style scoped>
.qwerg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    background-color: white;
    color: black;
}

.activ1d1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.qwe111rg41 {
    width: 50%;
    height: 40px;
    background-color: white;
    color: black;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.activd1d1e {
    width: 50%;
    height: 40px;
    background-color: #1677ff;
    color: white;
    border: 0;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}
</style>